<template>
    <section style="height: 100%;background: #fff;">
     <ul>
       <li style="position: relative;height: 1.5rem">
         <span>修改头像</span>
         <span>
            <img :src="userHead" style="width: 1rem;height: 1rem;border-radius: 50%">
            <input type="file" accept="image/*" @change="uploadChange" class="input_change" ref="avatarInput">
         </span>
       </li>
       <li>
         <span>设置昵称</span>
         <yd-input style="width:100px;text-align: right!important;" slot="right" v-model="userName"  :show-success-icon="false"  max="8" placeholder="昵称"></yd-input>
       </li>
       <li>
         <span>所属行业</span>
         <yd-input style="width:100px;text-align: right;" slot="right" v-model="userJob"  :show-success-icon="false"  max="8" placeholder="行业"></yd-input>
       </li>
     </ul>
      <yd-button size="large" type="danger"  class="sure_btn" @click.native="sureBtn()">保存</yd-button>
    </section>
</template>

<script>
    export default {
        name: "changeMessage",
        data(){
          return{
            userHead:require('../../assets/mine/no_head.png'),
            userName:'',
            userJob:'',
          }
        },
      methods:{
          sureBtn(){

            let that = this;
            let formdata = new FormData()
            let config = {
              headers:{'Content-Type':'multipart/form-data'}
            };
            formdata.append('image', this.$refs.avatarInput.files[0]);

            this.$dialog.loading.open('正在保存');
            setTimeout(()=>{
              if(this.$refs.avatarInput.files[0] != undefined){
                this.$ajax.post(window.g.apiUrl+'/account/upHead.do',formdata,config).then((response)=>{
                  if(response.data.code == 200){
                    that.$ajax.post(window.g.apiUrl+'/user/upName.do',JSON.stringify({
                      nickName:that.userName,
                      industry:that.userJob,
                    })).then((response)=>{
                      this.$dialog.loading.close();
                      if(response.data.code == 200){
                        this.$dialog.toast({
                          mes: '保存成功',
                          icon:'success',
                          timeout: 1000,
                          callback: () => {
                            this.$router.push('/mine')
                          }
                        });
                      }else{
                        this.$dialog.toast({
                          mes: '保存失败，请稍后重试',
                          icon:'error',
                          timeout: 1500,
                        });
                      }
                    })
                  }else{
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                      mes: '头像上传失败，请稍后重试',
                      icon:'error',
                      timeout: 1500,
                    });
                  }
                }).catch(()=>{
                })
              }else{
                that.$ajax.post(window.g.apiUrl+'/user/upName.do',JSON.stringify({
                  nickName:that.userName,
                  industry:that.userJob,
                })).then((response)=>{
                  this.$dialog.loading.close();
                  if(response.data.code == 200){
                    this.$dialog.toast({
                      mes: '保存成功',
                      icon:'success',
                      timeout: 1000,
                      callback: () => {
                        this.$router.push('/mine')
                      }
                    });
                  }else{
                    this.$dialog.toast({
                      mes: '保存失败，请稍后重试',
                      icon:'error',
                      timeout: 1500,
                    });
                  }
                })
              }


            },150)

          },
        uploadChange(){
          let that = this;
          if (this.$refs.avatarInput.files[0]) {
            var file = this.$refs.avatarInput.files[0]
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function () {
              that.userHead = this.result;
            }
          }
        }
      },
      created(){
        const that = this;
        let userid = localStorage.getItem('userid');

        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=>{
            if(response.data.code != 200){
              this.$dialog.notify({
                mes: '登录失效，正在跳转至登录页面',
                timeout: 1500,
                callback:()=>{
                  that.$router.push('/login');
                }
              });
            }else{
              that.$ajax.post(window.g.apiUrl+'/user/getUser.do',JSON.stringify({
                id:userid,
              })).then((response)=>{
                if(response.data.code == 200){
                  if(response.data.data.head != undefined){
                    that.userHead = response.data.data.head+'?t='+Date.now();
                  }else{
                    that.userHead = require('../../assets/mine/no_head.png')
                  }
                  if(response.data.data.nickname != undefined){
                    that.userName = response.data.data.nickname;
                  }else{
                    that.userName = '';
                  }
                  that.userJob = response.data.data.industry;
                }else{
                  that.$dialog.notify({
                    mes: '信息获取超时，请稍后重试',
                    timeout: 1500,
                  });
                }

              }).catch(()=>{
              })

            }
          }).catch(()=>{
        })

      },
      mounted(){
          document.getElementsByTagName('input')[1].style.textAlign = 'right';
          document.getElementsByTagName('input')[2].style.textAlign = 'right';
      }
    }
</script>

<style scoped>
ul li{
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 .28rem;
  border-bottom: 1px solid #f2f2f2;
}
ul li:nth-child(3){
  border-bottom: none;
}
  ul{
    box-shadow: 0px 5px 10px rgba(194,194,194,.2);
  }
.sure_btn{
  position: fixed;
  bottom: 25px;
  width: 96%;
  margin-left: 2%;
}
  input{
    outline: none;
    border: none;
    text-align: right;
  }
  .input_change{
    width: 100%;
    height: 1rem;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    opacity: 0;
    left: 0;
    top: 0.25rem;
  }
</style>
